<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div class="wl-gantt-demo">
      <wlGantt
        ref="wl-gantt-demo"
        lazy
        use-real-time
        use-other-time
        use-check-column
        use-index-column
        use-already-time
        :show-page="true"
         use-top-two-time
        end-date="2022-03"
        start-date="2022-01"
        date-type="monthAndDay"
        :data="data.slice(
        (pages.currentPage - 1) * pages.pageSize,
        (pages.currentPage - 1) * pages.pageSize +
          pages.pageSize
      )"
        :contextMenuOptions="contextMenuOptions"
        @current-change-page="currentChange"
        @selection-change="selectionChange"
        @expand-change="expandChange"
        @timeChange="timeChange"
        @taskRemove="taskRemove"
        @preChange="preChange"
        @taskAdd="taskAdd"
        @rightRow="rightRow"
        :currentPage="pages.currentPage"
        :pageSizes="pages.pageSizes"
        :pageSize="pages.pageSize"
        :total="pages.total"
        :colorArr='colorArr'
        :colorLower='colorLower'
        :bgOne='bg_one'
        :bgTwo="bg_two"
        :bgThree="bg_three"
        :bgFour="bg_four"
        :bgLower="bg_lower"
      >
      <template #wyg>
            <el-table-column  fixed type="selection" width="55" align="center" ></el-table-column>
            <el-table-column fixed type="index" width="50" label="序号"></el-table-column>
            <el-table-column
              fixed
              label="项目名称"
              min-width="200"
              class-name="name-col"
              align="center">
            >
              <template slot-scope="scope">
                {{scope.row.name}}             
              </template>
            </el-table-column>
              <el-table-column
              fixed
              label="项目名称"
              min-width="200"
              class-name="name-col"
              align="center">
            >
              <template slot-scope="scope">
                {{scope.row.realStartDate}}             
              </template>
            </el-table-column>
      </template> 
      </wlGantt>

    </div>
  </div>
</template>

<script>
// import wlGantt from "./components/gantt.vue";
import wlGantt from "@/pages/wl-gantt";

export default {
  name: "app",
  data() {
    return {
    pages:{
      currentPage:1,
      pageSize:5,
      total:19,
      pageSizes:[5,10,15,20],
    },
    bg_one:'red',
    bg_two:'pink',
    bg_three:'black', 
    bg_four:'green',
    bg_lower:'orange',
    colorArr:['黄色','粉色','黑色','绿色'],
    colorLower:['下面'],
    data: [ 
        {
          id: "1",
          pid: "0",
          name: "旅行", 
          topinfinite:[{ topinfiniteStart:"2022-01-28",topinfiniteEnd:"2022-01-29",bg:"bgOne"},{ topinfiniteStart:"2022-02-06",topinfiniteEnd:"2022-02-10",bg:"bgTwo"},{ topinfiniteStart:"2022-02-12",topinfiniteEnd:"2022-02-15",bg:"bgThree"},{ topinfiniteStart:"2022-02-18",topinfiniteEnd:"2022-02-25",bg:"bgFour"},{ topinfiniteStart:"2022-02-26",topinfiniteEnd:"2022-02-28",bg:"bgTwo"}],
          infiniteBetween:[{infiniteStart:'2022-02-01',infiniteEnd:'2022-02-01',bg:"bgOne"},{infiniteStart:'2022-02-08',infiniteEnd:'2022-02-10',bg:"bgTwo"},{infiniteStart:'2022-02-12',infiniteEnd:'2022-02-15',bg:"bgThree"},{infiniteStart:'2022-02-20',infiniteEnd:'2022-02-25',bg:"bgTwo"}],
          children: [
          //   {  
          //     id: "1-1",
          //     pid: "1",
          //     name: "云台之间",
          //     startDate: "2021-01-05",
          //     endDate: "2021-01-10",
          //      otherStartDate:"2021-01-15",
          // otherEndDate:"2021-01-25",
          //   },
          //   {
          //     id: "1-2",
          //     pid: "1",
          //     name: "天空之镜",
          //    startDate: "2021-01-08",
          //    endDate: "2021-01-12",
          //    otherStartDate:"2021-01-16",
          //    otherEndDate:"2021-01-28",
          //     realStartDate: "2021-01-10",
          // realEndDate: "2021-01-15",
          //  infiniteBetween:[{infiniteStart:'2021-02-01',infiniteEnd:'2021-02-05'},{infiniteStart:'2021-02-08',infiniteEnd:'2021-02-10'},{infiniteStart:'2021-02-12',infiniteEnd:'2021-02-15'},{infiniteStart:'2021-02-20',infiniteEnd:'2021-02-25'}],
          //   },
          //   {
          //     id: "1-3",
          //     name: "蓬莱之岛",
          //     pid: "1",
          //     startDate: "2021-01-05",
          //     endDate: "2021-01-10",
          //      otherStartDate:"2021-01-15",
          // otherEndDate:"2021-01-25",
          //  realStartDate: "2021-01-10",
          // realEndDate: "2021-01-15",
          //   },
          //   {
          //     id: "1-4",
          //     pid: "1",
          //     name: "西塘之南",
          //    startDate: "2021-01-05",
          //     endDate: "2021-01-10",
          //      otherStartDate:"2021-01-15",
          // otherEndDate:"2021-01-25",
          //  realStartDate: "2021-01-10",
          // realEndDate: "2021-01-15",
          //   },
          //   {
          //     pid: "1",
          //     id: "1-5",
          //     name: "凤凰之缘",
          //    startDate: "2021-01-05",
          //     endDate: "2021-01-10",
          //      otherStartDate:"2021-01-15",
          // otherEndDate:"2021-01-25",
          //   }
          ]
        },
      ], // 数据
      selected: [], // 选中数据
      contextMenuOptions: [
        { label: "任务名称", prop: "name" },
        { label: "开始时间", prop: "startDate" },
        { label: "结束时间", prop: "endDate" }
      ]
    };
  },
  methods: {
    currentChange(val){
      this.pages.currentPage = val
    },
    rightRow(row){
      console.log(row,'youjian')
    },
    /**
     * 时间发生更改
     * row: Object 当前行数据c
     */
    timeChange(row) {
      console.log("时间修改:", row);
    },
    //
    /**
     * 前置任务发生更改
     * row: Object 当前行数据
     * oldval: [String, Array] 前置修改前的旧数据
     * handle: Boolean 是否用户编辑产生的改变
     */
    preChange(row, oldval, handle) {
      console.log("前置修改:", row, oldval, handle);
    },
    // 数表展开行
    expandChange(row, expanded) {
      console.log("展开行:", row, expanded);
    },
    // 多选选择
    selectionChange(val) {
      console.log("多选：", val);
    },
    // 删除任务
    taskRemove(item) {
      console.log("删除任务：", item);
    },
    // 添加任务
    taskAdd(item) {
      console.log("添加任务：", item);
      // 非懒加载方式直接设置子数据
      /* this.$set(
        item,
        "children",
        item.children.concat([
          {
            pid: item.id,
            id: "###",
            name: "一轮新月",
            startDate: "2019-10-11",
            endDate: "2019-10-19"
          }
        ])
      ); */
      this.$refs["wl-gantt-demo"].loadTreeAdd(item.id, [
        {
          pid: item.id,
          id: "###",
          name: "一轮新月",
          startDate: "2019-10-11",
          endDate: "2019-10-19"
        }
      ]);
    },
    // 懒加载
    lazyLoad(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: "1-1-1",
            pid: tree.id,
            name: "日落云巅",
            startDate: "2019-09-10",
            endDate: "2019-09-13"
          }
        ]);
      }, 1000);
    }
  },
  components: {
    wlGantt
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 20px 25px 0;
}

.wl-gantt-demo {
  margin: 40px auto;
  // width: 800px;
}
>>>.el-table-body tr.hover-row.current-row>td,.el-table_body tr.hover-row.el_table_row--striped.current-row>td,.el-table_body tr.hover-row.el-table_row--striped>td,.el-table_body tr.hover-row>td{
  background-color:blue !important;
}

</style>
